<template>
  <div>
    <div id="head">
      <van-icon size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      身份认证
    </div>

    <div v-if="this.user.proveStatus == 0">
      <h3>请输入姓名和身份证号</h3>
      <van-cell-group>
        <van-field v-model="people.name" label="姓名" placeholder="姓名" />
        <van-field v-model="people.idNumber" label="身份证号" placeholder="身份证号" />
      </van-cell-group>

      <div style="margin-top: 30px;margin-bottom: 250px">
        <van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" class="my-uploader">
          <van-button style="margin-top: 30px" icon="plus"  type="info">上传身份证正面照</van-button>
        </van-uploader>
      </div>

      <div>
        <van-button type="info" size="large" round style="width: 260px" @click="toProve()">确认</van-button>
      </div>
    </div>

    <div v-if="this.user.proveStatus==1">
      <h3>已认证</h3>

      <van-button type="info" size="large" round style="width: 220px" @click="detail()">点击查看详情</van-button>
    </div>

    <van-dialog v-model="showDialog" title="详情" show-cancel-button @confirm="onConfirm">
      <van-field :value="name"  label="姓名" right-icon="browsing-history-o" @click-right-icon="showName()"/>
      <van-field :value="number"  label="身份证号" right-icon="browsing-history-o" @click-right-icon="showNumber()"/>
    </van-dialog>

  </div>
</template>

<script>

import {Toast, Uploader} from "vant";
import axios from "axios";

export default {
  components: {
    [Uploader.name]: Uploader
  },
  data() {
    return {
      fileList: [],
      image: [],
      formData: {},
      aaa:{},
      form:{},
      people:{},
      pojo:{},
      showDiv:false,
      user:{},
      showDialog:false,
      number:"",
      name:"",
    }
  },
  methods: {
    showNumber(){
      this.showDialog = true;
      this.number = this.user.idNumber;
    },
    showName(){
      this.showDialog = true;
      this.name = this.user.name;
    },
    getName(){
      let frontPart = this.user.name.toString().substring(0, 1);
      let backPart = '*'.repeat(2);
      this.name =  frontPart + backPart;
    },
    getNumber(){
      let frontPart = this.user.idNumber.toString().substring(0, 4);
      let backPart = '*'.repeat(14);
      this.number =  frontPart + backPart;
    },
    onConfirm(){

    },
    detail(){
      this.showDialog = true;
      this.getNumber();
      this.getName();
    },
    toProve(){
      this.pojo.name = this.people.name;
      this.pojo.idNumber = this.people.idNumber;
      this.pojo.userId = this.aaa.userId;
      axios.post("http://localhost:9999/api-user-service/user/prove",this.pojo).then(res=>{
        this.$toast("认证成功");
        this.toHead();
      })
    },
    afterRead(file) {
      const formData = new FormData();
      formData.append('file', file.file);

      axios.post("http://localhost:9999/myModule-service/idCard/getIdCard", formData)
          .then(response => {
            console.log(response.data.data.face.data);
            this.people = response.data.data.face.data;
            this.$toast("获取成功");
          })
          .catch(error => {
            console.error(error);
          });
    },
    toUpload(){
      this.form.image = this.image;
      this.form.username = this.aaa.username;
      axios.post("http://localhost:9999/myModule-service/face/saveFace",this.form).then(res=>{
        this.$toast("添加成功");
        this.fileList = []
      })
    },
    read(file) {
      const files = Array.isArray(file) ? file : [file];
      files.forEach((item) => {
        // 创建 FormData
        const formData = new FormData();
        formData.append('file', item.file);
        // 上传文件到服务器
        this.axios.post('http://localhost:9999/myModule-service/oss/upload', formData, {
          headers: {
            // 设置请求头
            'Content-Type': 'multipart/form-data',
          },
        }).then(res => {
          // 初始化 shippingannex 为字符串
          if (!this.formData.shippingannex) {
            this.formData.shippingannex = '';
          }
          // 将文件 URL 添加到字符串中，用逗号分隔
          this.formData.shippingannex = this.formData.shippingannex
              ? this.formData.shippingannex + ',' + res.data
              : res.data;
          // this.image.push(res.data.data);
          // console.log(this.image)
          this.image = this.formData.shippingannex;
          console.log(this.image);

          Toast.success('文件上传成功');

        })
      });
    },
    toHead() {
      this.$router.push('/my')
    },
    findOne(){
      axios.post("http://localhost:9999/api-user-service/user/findById?id="+this.aaa.userId).then(res=>{
        this.user = res.data;
      })
    },
  },
  created(){
      this.aaa = JSON.parse(localStorage.getItem("aa"));

      this.findOne();
  },
}
</script>

<style>
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
#table{
  width: 340px;
  margin-top: 10px;
  margin-left: 20px;
  border-collapse: collapse;
}
.camera-box #canvas{
  border: 1px solid #DCDFE6;
}

img {
  width: 300px;
  height: 200px;
}

</style>
